<template>
	<view class="feedback">
		<view class="content">
			<view class="top">
				<view class="desc">
					问题描述
				</view>
				<view class="badge">*</view>
				<textarea v-model="remark" placeholder="请仔细填写，以便查看" maxlength="500"></textarea>
			</view>
			<view class="bottom">
				<view class="desc">
					上传照片 <text>（请上传反馈图）</text>
				</view>
				<view class="badge">*</view>
				<view class="photo-list">
					<block v-for="(item, index) in photos" :key="index">
						<view class="photo-item">
							<template v-if="item.uri">
								<image @click="previewImage(index)" class="has-photo" mode="scaleToFill" :src="item.uri"></image>
								<view class="delete-phone" @click="remove(index)">
									<image src="../../static/images/close.png"></image>
								</view>
							</template>
							<template v-else>
								<image @click="chooseImage" class="empty-photo" src="../../static/images/add.png"></image>
							</template>
						</view> 
					</block>
				</view>
			</view>
		</view>
		<view class="button-nav">
			<view @click="cancel">取消</view>
			<view @click="submit">提交</view>
		</view>
	</view>
</template>

<script>
	import {MAX_UPLOAD_PHOTO_COUNT} from '../../config/const.js'
	export default {
		data() {
			return { 
				photos: [{
					uri: "",
				}],
				// 问题描述
				remark: '',
				url: '',
				typename: '',
				errid: null,
				sn: ''
			}
		},
		onLoad(options) {
			this.url = options.url;
			this.typename = options.typename;
			this.errid = options.errid;
			this.sn = options.sn;
		},
		
		methods: {
			/**
			 * 选择上传的图片
			 */
			chooseImage() {
				uni.chooseImage({
					sourceType: ['camera'],
					sizeType: ['compressed'],
					success: res => {
						let size = this.photos.length;
						// 最多上传9张
						if (size >= MAX_UPLOAD_PHOTO_COUNT) {
							this.photos[size - 1].uri = res.tempFilePaths[0];
						} else {
							this.photos.splice(size - 1, 0, {uri: res.tempFilePaths[0]})
						}
					}
				})
			},
			/**
			 * 预览图片
			 * @param {Object} index 图片所在的索引
			 */
			previewImage(index) {
				uni.previewImage({
					current: index,
					urls: this.photos.filter(item => item.uri).map(item => item.uri),
					indicator: 'default'
				})
			},
			/**
			 * 移除图片
			 * @param {Object} index 图片所在的索引
			 */
			remove(index) {
				uni.showModal({
					title: '询问',
					content: '是否要删除此图片？',
					success: res => {
						if (res.confirm) {
							// 点击确认时的回调
							let size = this.photos.length;
							if (size >= MAX_UPLOAD_PHOTO_COUNT && this.photos[size -1].uri) {
								this.photos.push({uri: ""});
							}
							this.photos.splice(index, 1);
						} else if (res.cancel) {
							// 点击取消时的回调
							return;
						}
					}
				});
			},
			/**
			 * 取消反馈
			 */
			cancel() {
				uni.navigateBack({
					url: '/pages/index/index'
				});
			},
			/**
			 * 提交反馈
			 */
			submit() {
				// 1.校验参数
				if (!this.remark) {
					uni.showToast({
						title: "问题描述信息不能为空",
						icon: "none",
						duration: 2000
					})
					return;
				}
				if (this.remark.length > 500) {
					uni.showToast({
						title: "问题描述长度不能超过500",
						icon: "none",
						duration: 2000
					})
					return;
				}
				if (this.photos.length === 1) {
					uni.showToast({
						title: "还没有上传问题图片",
						icon: "none",
						duration: 2000
					})
					return;
				}
				
				// 2.提交反馈
				uni.showModal({
					title: '询问',
					content: '确定要提交吗？',
					success: res => {
						if (res.confirm) {
							uni.showLoading({
								title: "提交中，请稍后",
								mask: true
							})
							// 点击确认时的回调
							uni.uploadFile({
								url: this.url,
								files: this.photos.filter(item => item.uri),
								formData: {
									remark: this.remark,
									typename: this.typename,
									errid: this.errid,
									sn: this.sn
								},
								success: res => {
									let data = JSON.parse(res.data);
									if (data.code === 200) {
										uni.showToast({
											title: "提交成功",
											duration: 2000
										});
										setTimeout(() => {
											uni.redirectTo({
												url: '/pages/index/index'
											});
										}, 2000);
									} else {
										uni.showToast({
											title: data.message,
											icon: 'none',
											duration: 2000
										});
									}
								},
								fail: err => {
									uni.showToast({
										title: "网络错误\r\n请稍后再试",
										icon: 'none',
										duration: 2000
									});
								}, 
								complete: () => {
									uni.hideLoading();
								}
							});
						} else if (res.cancel) {
							// 点击取消时的回调
							return;
						}
					}
				});
			}
		}
	}
</script>

<style scoped lang="scss">
 @import '~@/static/css/feedback.scss';
</style>
